<template>
  <div class="echart-view">
    <div id="go-pic">
      <el-icon><Eleme /></el-icon>
    </div>
  </div>
</template>

<script>


import { Eleme } from "@element-plus/icons-vue";
export default {
  props: {
    weeklist: {
      type: Object,
      default: function() { return {} }
    }
  },
  components: {
    Eleme,
  },
  methods: {
    loadechart() {
      var myChart = this.$echarts.init(document.getElementById("go-pic"));
      var option;
      //配置表
      option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "{a|  活跃用户登录}",
          show: true,
          textStyle: {
            fontFamily: "幼圆",
            lineHeight: 35,
            rich: {
              a: {
                color: "#aaa",
                fontSize: "16",
                height: 15,
                width: 15,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // legend: {
        //   data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
        // },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "活跃人数",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [this.weeklist.mon,this.weeklist.tus,this.weeklist.thi,this.weeklist.fou,this.weeklist.fri,this.weeklist.sat,this.weeklist.sun],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.loadechart();
  },
};
</script>

<style scoped>
.echart-view {
  height: 300px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
#go-pic {
  width: 100%;
  height: 100%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .echart-view {
    width: 90%;
    height: 200px;
  }
}
</style>